<template>
    <img @bind="imgNode" src="res/ui/ground2.png" :width="imgWidth" :height="imgHeight" grid="7,7,7,7"></img>
    <txt @bind="titleNode" :text="title" x="10" y="10" size="18" color="#ffffff"></txt>
    <txt @bind="descNode" :text="desc" x="10" y="40" size="14" color="#DDDDDD"></txt>
</template>

<script>
    data(){
        return {
            title: "标题",
            desc: "富文本提示框",
            imgNode: null,
            titleNode: null,
            descNode: null,
            imgWidth: 0,
            imgHeight: 0
        }
    }

    watch() {
        return {
		    title: "contentChange",
            desc: "contentChange"
        }
	}

    create() {
        console.log("tip create");
    }

    update(delta) {

    }

    destroyed() {

    }

    updateContent(title, desc) {
        this.title = title;
        this.desc = desc;
    }

    contentChange(newValue, oldValue){//watch 后自动监听 content 的修改
        this.imgWidth = 20 + (this.titleNode.width > this.descNode.width ? this.titleNode.width : this.descNode.width);
        this.imgHeight = 50 + (this.titleNode.height > this.descNode.height ? this.titleNode.height : this.descNode.height);
    }
</script>